<template>
  <div>
    <div class="form">
      <el-table :data="recorddata" border style="width: 100%">
        <el-table-column fixed prop="leaveName" label="请假类型" align="center" width="180"> </el-table-column>
        <el-table-column prop="leave" label="请假日期" align="center"> </el-table-column>
        <el-table-column prop="description" label="请假事由" align="center" width="180" show-overflow-tooltip>
        </el-table-column>
        <el-table-column prop="status" label="审批进度" align="center" width="120">
          <template slot-scope="scope">
            <div v-if="scope.row.status == 0">待审批</div>
            <div v-if="scope.row.status == 1">通过</div>
            <div v-if="scope.row.status == 2">不通过</div>
            <div v-if="scope.row.status == 3">待销假</div>
            <div v-if="scope.row.status == 4">已销假</div>
          </template>
        </el-table-column>
        <el-table-column fixed="right" label="操作" align="center">
          <template slot-scope="scope">
            <el-button @click="handleClick(scope.row, 1)" type="text" size="small">详情</el-button>
            <el-button
              @click="handleClick(scope.row, 2)"
              type="text"
              size="small"
              style="color: #f56e2a"
              v-show="scope.row.status == 1"
              >销假</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <el-pagination background layout="prev, pager, next" :total="page * 10" @current-change="change"> </el-pagination>
      <el-dialog title="请假详情" :visible.sync="dialogFormVisible">
        <el-form v-model="form">
          <el-form-item label="请假人名称：">
            {{ this.form.fullName }}
          </el-form-item>
          <el-form-item label="请假人电话：">
            {{ this.form.phone }}
          </el-form-item>
          <el-form-item label="请假类型：">
            {{ this.form.leaveName }}
          </el-form-item>
          <el-form-item label="请假日期：">
            {{ this.form.time }}
          </el-form-item>
          <el-form-item label="请假事由：">
            {{ this.form.description }}
          </el-form-item>
          <el-form-item label="请假审批进度：">
            <!-- {{ this.form.city }} -->
            <span v-show="this.form.status == 0">待审批</span>
            <span v-show="this.form.status == 1">通过</span>
            <span v-show="this.form.status == 2">不通过</span>
            <span v-show="this.form.status == 3">待销假</span>
            <span v-show="this.form.status == 4">已销假</span>
          </el-form-item>
          <el-form-item label="拒绝理由：" v-if="form.reason">
            <!-- {{ this.form.city }} -->
            {{ this.form.reason }}
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button type="primary" @click="dialogFormVisible = false" v-show="SubmitStatus == 1">确 定</el-button>
          <el-button type="primary" @click="Submit" v-show="SubmitStatus == 2">提 交</el-button>
        </div>
      </el-dialog>
    </div>
  </div>
</template>

<script>
import api from '@/api/api'
export default {
  props: {
    page: {
      type: Number,
      default() {
        return
      },
    },
    recorddata: {
      type: Array,
      default() {
        return []
      },
    },
  },
  data() {
    return {
      dialogFormVisible: false,
      form: {},
      id: '',
      SubmitStatus: 0,
    }
  },
  methods: {
    SubmitDetails() {
      api.details(this.id).then(res => {
        let time = 'time'
        this.form = res.data
        let leavetime = this.form.startTime + ' 至 ' + this.form.endTime
        this.form[time] = leavetime
      })
      this.dialogFormVisible = true
    },
    Submit() {
      api.endVacation(this.id).then(e => {
        if (e.code == 200) {
          this.$message({
            message: '提交成功！',
            type: 'success',
          })
          this.$parent.getleavelist()
          this.dialogFormVisible = false
        }
      })
    },
    handleClick(scope, val) {
      switch (val) {
        case 1:
          this.id = scope.id
          this.SubmitStatus = val
          this.SubmitDetails()
          break
        case 2:
          if (scope.status != 1) {
            this.$message({
              message: '审批通过才可进行销假！',
              type: 'error',
            })
          } else {
            this.id = scope.id
            this.SubmitStatus = val
            this.SubmitDetails()
          }
          break
        default:
          break
      }
    },
    change(val) {
      this.$parent.getleavelist(val)
    },
  },
}
</script>

<style lang="scss" scoped>
.form {
  width: 80%;
  height: 525px;
  margin-top: 50px;
  padding: 87px;
  border-radius: 15px 15px 15px 15px;
  ::v-deep .el-table {
    border-radius: 15px 15px 15px 15px;
    height: 448px;
    ::v-deep .el-table__body-wrapper {
      font-size: 12px;
    }
  }
  ::v-deep .el-pagination {
    width: 404px;
    margin: 0 auto;
    margin-top: 20px;
  }
  .el-dialog {
    .el-form {
      margin-left: 20px;
    }
    .dialog-footer {
      text-align: center;
    }
  }
}
</style>
